import React from 'react';
import { Card, Button, Space, Typography, Alert } from 'antd';
import { BulbOutlined, SunOutlined, MoonOutlined } from '@ant-design/icons';
import { useThemeConfig } from '../contexts/ThemeConfigContext';

const { Title, Text, Paragraph } = Typography;

const ThemeAnimationDemo = () => {
    const { isDark, toggleTheme } = useThemeConfig();

    return (
        <div style={{ padding: 24 }}>
            <Card>
                <Space direction="vertical" size="large" style={{ width: '100%' }}>
                    <div>
                        <Title level={2}>
                            <BulbOutlined style={{ marginRight: 8 }} />
                            Element-Plus 风格主题切换动画演示
                        </Title>
                        <Paragraph>
                            点击下面的按钮体验圆形扩散主题切换动画，该动画使用了 Web API 的 View Transitions API。
                        </Paragraph>
                    </div>

                    {!document.startViewTransition && (
                        <Alert
                            message="浏览器兼容性提示"
                            description="您的浏览器不支持 View Transitions API，将使用普通的主题切换效果。建议使用 Chrome 111+ 或其他支持的现代浏览器获得最佳体验。"
                            type="warning"
                            showIcon
                        />
                    )}

                    <div style={{ textAlign: 'center', padding: '40px 0' }}>
                        <Space direction="vertical" size="middle">
                            <Text strong style={{ fontSize: 16 }}>
                                当前主题：{isDark ? '深色模式' : '浅色模式'}
                            </Text>

                            <Button
                                type="primary"
                                size="large"
                                icon={isDark ? <SunOutlined /> : <MoonOutlined />}
                                onClick={(e) => toggleTheme(e)}
                                style={{
                                    height: 60,
                                    fontSize: 16,
                                    borderRadius: 30,
                                    minWidth: 200,
                                    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                                }}
                            >
                                {isDark ? '切换到浅色主题' : '切换到深色主题'}
                            </Button>

                            <Text type="secondary" style={{ fontSize: 12 }}>
                                {document.startViewTransition
                                    ? '✨ 点击按钮体验圆形扩散动画效果'
                                    : '⚠️ 当前浏览器不支持动画效果'
                                }
                            </Text>
                        </Space>
                    </div>

                    <Card size="small" title="技术原理" style={{ marginTop: 20 }}>
                        <Space direction="vertical" size="small" style={{ width: '100%' }}>
                            <Text>
                                <Text strong>View Transitions API：</Text>
                                这是一个现代浏览器提供的原生API，用于创建平滑的页面转换效果。
                            </Text>
                            <Text>
                                <Text strong>圆形裁剪路径：</Text>
                                通过 CSS 的 clip-path 属性和 circle() 函数实现圆形扩散效果。
                            </Text>
                            <Text>
                                <Text strong>动态半径计算：</Text>
                                使用勾股定理计算从点击点到窗口最远边缘的距离作为圆的最大半径。
                            </Text>
                            <Text>
                                <Text strong>层级控制：</Text>
                                通过 ::view-transition-old(root) 和 ::view-transition-new(root) 伪元素控制动画层级。
                            </Text>
                        </Space>
                    </Card>
                </Space>
            </Card>
        </div>
    );
};

export default ThemeAnimationDemo;
